<template>
	<div class="device-model">
		<div class="device-content">
			<!-- 弹框头部 -->
			<div class="alarm-close pointer" @click="closeDialog">
				<i class="el-icon-close"></i>
			</div>
			<div class="alarm-title">
				<span class="title-text pointer">{{deviceObj.deviceTypeName}}</span>
			</div>
			<!-- 设备描述板块 -->
			<div class="device-desc">
				<div class="desc-left">
					<img :src="deviceObj.icon" alt="" class="left-img" />
					<div class="img-bg">
						<image src="../../static/img/device-bottom.png" class="bottom-img" mode=""></image>
					</div>
				</div>
				<div class="desc-right">
					<div class="main-item">
						<div class="item-left">
							<span style="color: rgba(255, 255, 255, 0.5);">当前状态:</span>
							<span :class="deviceObj.color">{{deviceObj.text}}</span>
						</div>
						<div class="item-right">
							<span style="color: rgba(255, 255, 255, 0.5);">所属型号:</span>
							<span style="color: rgba(255, 255, 255, 0.9);">{{ deviceObj.deviceModelName }}</span>
						</div>
					</div>
					<div class="main-item">
						<div class="item-left">
							<span style="color: rgba(255, 255, 255, 0.5);">告警信息:</span>
							<span style="color: rgba(255, 255, 255, 0.9);"
								:class="deviceObj.color">{{ deviceObj.alarmReason }}</span>
						</div>
						<div class="item-right">
							<span style="color: rgba(255, 255, 255, 0.5);">所属建筑:</span>
							<span style="color: rgba(255, 255, 255, 0.9);">{{ deviceObj.buildName }}</span>
						</div>
					</div>
					<div class="main-item">
						<div class="item-left">
							<span style="color: rgba(255, 255, 255, 0.5);">所属系统:</span>
							<span style="color: rgba(255, 255, 255, 0.9);">{{ deviceObj.systemName}}</span>
						</div>
						<div class="item-right">
							<span style="color: rgba(255, 255, 255, 0.5);">所属单位:</span>
							<span style="color: rgba(255, 255, 255, 0.9);">{{ deviceObj.deptName}}</span>
						</div>
					</div>
					<div class="main-item">
						<div class="item-left" style="display: flex;align-items: center;">
							<span style="color: rgba(255, 255, 255, 0.5);">设备编号:</span>
							<div class="title-id" style="color: rgba(255, 255, 255, 0.9);">{{ deviceObj.code }}</div>
						</div>
						<div class="item-right">
							<span style="color: rgba(255, 255, 255, 0.5);">设备厂商:</span>
							<span style="color: rgba(255, 255, 255, 0.9);">{{ deviceObj.manufacturerName }}</span>
						</div>
					</div>

					<div class="main-item">
						<div class="item-left" style="display: flex;align-items: center;">
							<span style="color: rgba(255, 255, 255, 0.5);">剩余电量:</span>
							<div class="title-id" style="color: rgba(255, 255, 255, 0.9);">{{ eletrincObj.electric }}
							</div>
						</div>
						<div class="item-right">
							<span style="color: rgba(255, 255, 255, 0.5);">卡到期时间:</span>
							<span style="color: rgba(255, 255, 255, 0.9);">{{ eletrincObj.simExpirationTime }}</span>
						</div>
					</div>
					<div class="main-item">
						<div class="item-left" style="display: flex;align-items: center;">
							<image src="../../static/img/marker.png" style="width: 20px;height: 21px;" mode=""></image>
							<span style="color: rgba(255, 255, 255, 0.5);">位置详情:</span>
							<span style="color: rgba(255, 255, 255, 0.9);">{{ deviceObj.addressDesc }}</span>
						</div>
					</div>

				</div>
			</div>
			<!-- 测点数据部分 -->
			<div class="distye">
				<!-- 最新上报时间头部 -->
				<template v-if="disTyeArr.length>=1">
					<div class="top-time">
						<span>最新上报时间:</span>
						<span>{{deviceObj.lastUploadTime}}</span>
					</div>
					<!-- 测点数据 -->
					<div class="all-distye">
						<div class="distye-item" :class="index==0?deviceObj.color:'normal'"
							v-for="(item,index) in disTyeArr" :key="item.id">
							<div class='item-data' :class="index==0?deviceObj.color:''"
								v-html="item.lastAlarmInfo? item.lastAlarmInfo:'--'">
							</div>
							<div class='item-detail'>{{item.pointName}}<span
									v-html="item.pointType===1?'('+item.unit+')' : '' "></span></div>
						</div>
					</div>
				</template>
				<template v-else>
					<view class="no-distye">
						<image src="../../static/img/no-alarm.png" mode=""></image>
						<span style="color: rgba(255, 255, 255, 0.7);">暂无测点数据</span>
					</view>
				</template>
			</div>
			<!-- 下拉选择 -->
			<div class="select">
				<div class="select-top">
					<el-select v-model="value" @change="selectChange" style="width:20%;">
						<el-option v-for="item in selectBtn" :key="item.value" :label="item.label" :value="item.value">
						</el-option>
					</el-select>
					<el-date-picker :disabled="value!==1&&value!==2&&value!==4" v-model="daterage"
						style="width: 19%; height: 30px;margin-left: 10px" size="mini" type="daterange"
						value-format="yyyy-MM-dd" start-placeholder="开始时间" end-placeholder="结束时间" @change="dateChange">
					</el-date-picker>
				</div>

				<!-- 表格部分 -->
				<!-- 报警处理记录表格部分 -->
				<template v-if="this.value===1">
					<uni-table border stripe emptyText="暂无更多数据" style="margin-top: 20px;">
						<!-- 表头行 -->
						<uni-tr>
							<uni-th align="left">报警原因</uni-th>
							<uni-th align="left">报警时间</uni-th>
							<uni-th align="left">处理人</uni-th>
							<uni-th align="left">处理时间</uni-th>
							<uni-th align="left">默认结果</uni-th>
						</uni-tr>
						<!-- 表格数据行 -->
						<uni-tr v-for="item in deviceAlarmList" :key="item.messageId">
							<uni-td>{{item.alarmReason}}</uni-td>
							<uni-td>{{item.alarmTime}}</uni-td>
							<uni-td>{{item.confirmUserName}}</uni-td>
							<uni-td>{{item.confirmTime}}</uni-td>
							<uni-td>{{item.alarmText}}</uni-td>
						</uni-tr>
					</uni-table>
					<div class="pagination">
						<page-pagination v-if="alarmListTotal>0" :total="alarmListTotal" :pageSize="8"
							:currentPage="currentPageNum" @change="changePageation">
						</page-pagination>
					</div>
				</template>
				<template v-else-if="value===2">
					<uni-table border stripe emptyText="暂无更多数据" style="margin-top: 20px;">
						<!-- 表头行 -->
						<uni-tr>
							<uni-th align="left">报警原因</uni-th>
							<uni-th align="left">报警时间</uni-th>
							<uni-th align="left">处理人</uni-th>
							<uni-th align="left">处理时间</uni-th>
							<uni-th align="left">默认结果</uni-th>
						</uni-tr>
						<!-- 表格数据行 -->
						<uni-tr v-for="item in deviceFaultList" :key="item.messageId">
							<uni-td>{{item.alarmReason}}</uni-td>
							<uni-td>{{item.alarmTime}}</uni-td>
							<uni-td>{{item.confirmUserName}}</uni-td>
							<uni-td>{{item.confirmTime}}</uni-td>
							<uni-td>{{item.alarmText}}</uni-td>
						</uni-tr>
					</uni-table>
					<div class="pagination">
						<page-pagination v-if="faultListTotal>0" :total="faultListTotal" :pageSize="8"
							:currentPage="currentPageNum" @change="changePageation">
						</page-pagination>
					</div>
				</template>
				<template v-else-if="value===3">
					<!-- 远程操作记录表格 -->
					<uni-table border stripe emptyText="暂无更多数据" style="margin-top: 20px;">
						<!-- 表头行 -->
						<uni-tr>
							<uni-th align="left">操作指令</uni-th>
							<uni-th align="left">操作时间</uni-th>
							<uni-th align="left">操作人</uni-th>
							<uni-th align="left">操作状态</uni-th>

						</uni-tr>
						<!-- 表格数据行 -->
						<uni-tr v-for="item in deviceRemoteList" :key="item.messageId">
							<uni-td>{{item.commandName}}</uni-td>
							<uni-td>{{item.createTime}}</uni-td>
							<uni-td>{{item.userName}}</uni-td>
							<uni-td>{{item.statusName}}</uni-td>
						</uni-tr>
					</uni-table>
					<div class="pagination">
						<page-pagination v-if="remoteControlTotal>0" :total="remoteControlTotal" :pageSize="4"
							:currentPage="currentPageNum" @change="changePageation">
						</page-pagination>
					</div>
				</template>
				<template v-else-if="value===4">
					<!-- 报警日志 -->
					<uni-table border stripe emptyText="暂无更多数据" style="margin-top: 20px;" class="alarm-log">
						<!-- 表头行 -->
						<uni-tr>
							<uni-th align="left">所属单位</uni-th>
							<uni-th align="left">设备编号</uni-th>
							<uni-th align="left">位置描述</uni-th>
							<uni-th align="left">设备状态</uni-th>
							<uni-th align="left">报警原因</uni-th>
							<uni-th align="left">报警时间</uni-th>
							<uni-th align="left">是否确认</uni-th>
							<uni-th align="left">确认人</uni-th>
							<uni-th align="left">确认时间</uni-th>
							<uni-th align="left">操作状态</uni-th>
						</uni-tr>
						<!-- 表格数据行 -->
						<uni-tr v-for="item in deviceAlarmLog" :key="item.messageId">
							<uni-td>{{item.deptName}}</uni-td>
							<uni-td>{{item.code}}</uni-td>
							<uni-td>{{item.addressDesc}}</uni-td>
							<uni-td :style="{'color':item.color}">{{item.statusName}}</uni-td>
							<uni-td class="alarm-reason">{{item.alarmReason}}</uni-td>
							<uni-td>{{item.alarmTime}}</uni-td>
							<uni-td>{{item.isConfirm}}</uni-td>
							<uni-td>{{item.confirmUserName}}</uni-td>
							<uni-td>{{item.confirmTime}}</uni-td>
							<uni-td :style="{'color':item.bgcolor}">{{item.alarmTypeName}}</uni-td>
						</uni-tr>
					</uni-table>
					<div class="pagination">
						<page-pagination v-if="alarmLogTotal>0" :total="alarmLogTotal" :pageSize="8"
							:currentPage="currentPageNum" @change="changePageation">
						</page-pagination>
					</div>
				</template>
				<template v-else-if="value===5">
					<!-- 隐患日志 -->
					<uni-table border stripe emptyText="暂无更多数据" style="margin-top: 20px;">
						<!-- 表头行 -->
						<uni-tr>
							<uni-th align="left">所属单位</uni-th>
							<uni-th align="left">设备编号</uni-th>
							<uni-th align="left">设备状态</uni-th>
							<uni-th align="left">隐患上报人</uni-th>
							<uni-th align="left">上报时间</uni-th>
							<uni-th align="left">当前节点</uni-th>

						</uni-tr>
						<!-- 表格数据行 -->
						<uni-tr v-for="item in deviceFaultlog" :key="item.messageId">
							<uni-td>{{item.deptName}}</uni-td>
							<uni-td>{{item.deviceCode}}</uni-td>
							<uni-td :style="{'color':item.color}">{{item.deviceStatusName}}</uni-td>
							<uni-td>{{item.createUserName}}</uni-td>
							<uni-td>{{item.createTime}}</uni-td>
							<uni-td>{{item.actNodeName}}</uni-td>

						</uni-tr>
					</uni-table>
					<div class="pagination">
						<page-pagination v-if="faultListTotal>0" :total="faultLogTotal" :pageSize="4"
							:currentPage="currentPageNum" @change="changePageation">
						</page-pagination>
					</div>
				</template>

				<template v-else-if="value===6">
					<!-- 设备运行日志 -->
					<uni-table border stripe emptyText="暂无更多数据" style="margin-top: 20px;">
						<!-- 表头行 -->
						<uni-tr>
							<uni-th align="left">所属单位</uni-th>
							<uni-th align="left">设备编号</uni-th>
							<uni-th align="left">所属系统</uni-th>
							<uni-th align="left">设备状态</uni-th>
							<uni-th align="left">位置描述</uni-th>
							<uni-th align="left">最新数据</uni-th>
							<uni-th align="left">上报时间</uni-th>

						</uni-tr>
						<!-- 表格数据行 -->
						<uni-tr v-for="item in deviceRunLog" :key="item.messageId">
							<uni-td>{{item.deptName}}</uni-td>
							<uni-td>{{item.code}}</uni-td>
							<uni-td>{{item.systemName}}</uni-td>
							<uni-td :style="{'color':item.color}">{{item.statusName}}</uni-td>
							<uni-td>{{item.addressDesc}}</uni-td>
							<uni-td class="new-data">{{item.pointData}}</uni-td>
							<uni-td>{{item.createTime}}</uni-td>

						</uni-tr>
					</uni-table>
					<div class="pagination">
						<page-pagination v-if="runLogTotal>0" :total="runLogTotal" :pageSize="8"
							:currentPage="currentPageNum" @change="changePageation">
						</page-pagination>
					</div>
				</template>
				<template v-else-if="value===7">
					<!-- 设备操作日志 -->
					<uni-table border stripe emptyText="暂无更多数据" style="margin-top: 20px;">
						<!-- 表头行 -->
						<uni-tr>
							<uni-th align="left">所属单位</uni-th>
							<uni-th align="left">设备编号</uni-th>
							<uni-th align="left">操作内容</uni-th>
							<uni-th align="left">上报时间</uni-th>


						</uni-tr>
						<!-- 表格数据行 -->
						<uni-tr v-for="item in deviceOperateLog" :key="item.messageId">
							<uni-td>{{item.deptName}}</uni-td>
							<uni-td>{{item.deviceCode}}</uni-td>
							<uni-td>{{item.content}}</uni-td>
							<uni-td>{{item.createTime}}</uni-td>


						</uni-tr>
					</uni-table>
					<div class="pagination">
						<page-pagination v-if="operateLogTotal>0" :total="operateLogTotal" :pageSize="4"
							:currentPage="currentPageNum" @change="changePageation">
						</page-pagination>
					</div>
				</template>
				<template v-else-if="value===8">
					<!-- 平台操作日志 -->
					<uni-table border stripe emptyText="暂无更多数据" style="margin-top: 20px;">
						<!-- 表头行 -->
						<uni-tr>
							<uni-th align="left">所属单位</uni-th>
							<uni-th align="left">IP地址</uni-th>
							<uni-th align="left">登录用户</uni-th>
							<uni-th align="left">操作人员</uni-th>
							<uni-th align="left">操作内容</uni-th>
							<uni-th align="left">操作时间</uni-th>
						</uni-tr>
						<!-- 表格数据行 -->
						<uni-tr v-for="item in PlatformLog" :key="item.messageId">
							<uni-td>{{item.deptName}}</uni-td>
							<uni-td>{{item.operateIp}}</uni-td>
							<uni-td>{{item.operateUsername}}</uni-td>
							<uni-td>{{item.operateRealname}}</uni-td>
							<uni-td>{{item.content}}</uni-td>
							<uni-td>{{item.createTime}}</uni-td>

						</uni-tr>
					</uni-table>
					<div class="pagination">
						<page-pagination v-if="platformLogTotal>0" :total="platformLogTotal" :pageSize="8"
							:currentPage="currentPageNum" @change="changePageation">
						</page-pagination>
					</div>
				</template>

			</div>


		</div>

	</div>
	</div>
</template>

<script>
	import deviceApi from "@/api/device.js"
	export default {
		props: {
			deviceId: {
				type: String,
				default: ''
			},
			deptId: {
				type: String,
				default: ''
			},
			deviceCode: {
				type: String,
				default: ''
			}
		},
		data() {
			return {
				deviceObj: {},
				selectBtn: [{
						value: 1,
						label: '报警处理记录'
					},
					{
						value: 2,
						label: '故障处理记录'
					},
					{
						value: 3,
						label: '远程操作记录'
					},
					{
						value: 4,
						label: '报警日志'
					},
					{
						value: 5,
						label: '隐患日志'
					},
					{
						value: 6,
						label: '设备运行日志'
					},
					{
						value: 7,
						label: '设备操作日志'
					},
					{
						value: 8,
						label: '平台操作日志'
					},


				],
				value: 1,
				deviceAlarmList: [], //设备报警隐患报警列表
				deviceFaultList: [], //设备隐患报警列表
				deviceRemoteList: [], //设备远程控制报警列表
				deviceAlarmLog: [], //设备报警日志
				deviceFaultlog: [], //设备隐患日志
				deviceRunLog: [], //设备运行日志
				deviceOperateLog: [], //设备操作日志
				PlatformLog: [], //平台操作日志
				currentAlarmStatus: "", //当前选中的记录类型
				remoteControlTotal: "", //远程操控
				alarmListTotal: 0, //报警总共合计
				faultListTotal: 0, //故障总共合计
				alarmLogTotal: 0, //报警日志合计
				faultLogTotal: 0, //故障日志合计
				runLogTotal: 0, //运行日志合计
				operateLogTotal: 0, //操作日志合计
				platformLogTotal: 0, //平台日志合计
				currentPageNum: 1,
				daterage: [],
				startTime: '',
				endTime: '',
				eletrincObj: {},
				disTyeArr: []
			};
		},
		created() {
			console.log(deviceApi)
			this.$api.getDeviceDetail(this.deviceId).then(res => {
				switch (res.data.system) {
					case "fc_system_wxgy":
						res.data.icon = require("../../static/img/wuxianyangan-model.png")
						break;
					case "fc_system_dqhz":
						res.data.icon = require("../../static/img/dianqihuozai-model.png")
						break;
					case "fc_system_xfdy":
						res.data.icon = require("../../static/img/xiaofangdianyuan-model.png")
						break;
					case "fc_system_xfys":
						res.data.icon = require("../../static/img/xiaofangyongshui-model.png")
						break;
					case "fc_system_wlsb":
						res.data.icon = require("../../static/img/wulianshebei-model.png")
						break;
					case "fc_system_fhm":
						res.data.icon = require("../../static/img/fanghuomen-model.png")
						break;
					case "fc_system_zm":
						res.data.icon = require("../../static/img/zhihuizhaoming-model.png")
						break;
					case "fc_system_cdz":
						res.data.icon = require("../../static/img/congdianzhuang-model.png")
						break;
					case "fc_system_krqt":
						res.data.icon = require("../../static/img/keranqiti-model.png")
						break;
					case "fc_system_xfzj":
						res.data.icon = require("../../static/img/xiaofangzhuji-model.png")
						break;

				}
				if (res.data.status === 4) {
					res.data.color = 'offline'
					res.data.text = '离线'
				} else if (res.data.status === 1) {
					res.data.color = 'alarm'
					res.data.text = '报警'
				} else if (res.data.status === 0) {
					res.data.color = 'fault'
					res.data.text = '故障'
				}

				this.deviceObj = res.data
			})
			this.DeviceGetElectric()
			this.DeviceGetTye()
			this.DeviceAlarmList()
			this.DeviceFaultList()
			this.DeviceRemoteControl()
			this.DeviceAlarmLog()
			this.deviceHiddleDanger()
			this.getDeviceRunLog()
			this.getDeviceOperateLog()
			this.DevicePlatformLog()

		},
		methods: {
			closeDialog() {
				this.$emit('isCloseDevice', false)
			},
			//封装这时的设备车测点数据
			DeviceGetTye() {
				deviceApi.getDeviceInfo({
					deviceId: this.deviceId
				}).then(res => {
					console.log(res, '这是测点数据')
					this.disTyeArr = res.data
				})
			},
			//封装获取设备电量,到期时间
			DeviceGetElectric() {
				deviceApi.getDeviceElectric({
					deviceId: this.deviceId
				}).then(res => {
					if (res.data.electric) {
						res.data.electric = res.data.electric + '%'
					} else {
						res.data.electric = '--'
					}
					if (res.data.simExpirationTime) {
						res.data.simExpirationTime = res.data.simExpirationTime
					} else {
						res.data.simExpirationTime = '--'
					}

					this.eletrincObj = res.data
				})
			},
			//封装设备报警列表
			DeviceAlarmList() {
				deviceApi.getDeviceAlarm({
					pageNum: this.currentPageNum,
					pageSize: 8,
					deptId: this.deptId,
					isDept: 0,
					confirm: 1,
					status: 1,
					deviceId: this.deviceId,
					beginAlarmTime: this.startTime,
					endAlarmTime: this.endTime
				}).then(res => {
					res.data.list.forEach(v => {
						if (v.alarmType == 1) {
							v.alarmText = '真实火警'
						} else if (v.alarmType == 2) {
							v.alarmText = '误报'
						} else if (v == 3) {
							v.alarmText = '测试'
						}
					})

					this.alarmListTotal = res.data.total
					this.deviceAlarmList = res.data.list
				})
			},
			//封装设备故障列表
			DeviceFaultList() {
				deviceApi.getDeviceAlarm({
					pageNum: this.currentPageNum,
					pageSize: 8,
					deptId: this.deptId,
					isDept: 0,
					confirm: 1,
					status: 0,
					deviceId: this.deviceId,
					beginAlarmTime: this.startTime,
					endAlarmTime: this.endTime
				}).then(res => {
					res.data.list.forEach(v => {
						if (v.alarmType == 1) {
							v.alarmText = '真实火警'
						} else if (v.alarmType == 2) {
							v.alarmText = '误报'
						} else if (v == 3) {
							v.alarmText = '测试'
						}
					})

					this.faultListTotal = res.data.total
					this.deviceFaultList = res.data.list
				})
			},
			//封装远程操作记录
			DeviceRemoteControl() {
				deviceApi.getListDeviceLog({
					pageNum: this.currentPageNum,
					pageSize: 8,
					deviceId: this.deviceId
				}).then(res => {
					res.data.list.forEach(v => {
						if (v.status === 2) {
							v.statusName = '执行成功'
						} else {
							v.statusName = '执行失败'
						}
					})
					this.deviceRemoteList = res.data.list
					this.remoteControlTotal = res.data.total
				})
			},
			//封装报警日志
			DeviceAlarmLog() {
				deviceApi.getDeviceAlarm({
					pageNum: this.currentPageNum,
					pageSize: 8,
					deptId: this.deptId,
					isDept: 0,
					code: this.deviceCode,
					beginAlarmTime: this.startTime,
					endAlarmTime: this.endTime
				}).then(res => {
					res.data.list.forEach(v => {
						if (v.deviceStatus === 1) {
							v.color = 'rgba(255, 61, 61, 1)'
							v.statusName = '报警'
						} else if (v.deviceStatus === 2) {
							v.color = 'rgba(0, 255, 196, 1)'
							v.statusName = '正常'
						} else if (v.deviceStatus === 4) {
							v.statusName = '离线'
							v.color = 'rgba(203, 206, 220, 1)'
						} else {
							v.statusName = '故障'
							v.color = 'rgba(254, 169, 64, 1)'
						}
						if (v.alarmType && v.alarmType == 2) {
							v.bgcolor = 'rgba(254, 169, 64, 1)'
							v.alarmTypeName = '误报'

						} else if (v.alarmType && v.alarmType == 1) {
							v.bgcolor = 'rgba(255, 61, 61, 1)'
							v.alarmTypeName = '火警'
						} else if (v.alarmType && v.alarmType == 3) {
							v.alarmTypeName = '测试'
							v.bgcolor = "rgba(255,255,255,0.7)"
						}
						if (v.alarmType) {
							v.isConfirm = '已确认'
						} else {
							v.isConfirm = '未确认'
						}
					})
					this.deviceAlarmLog = res.data.list
					this.alarmLogTotal = res.data.total
				})
			},
			deviceHiddleDanger() {
				deviceApi.getHiddleDangerLog({
					pageNum: this.currentPageNum,
					pageSize: 8,
					deptId: this.deptId,
					isDept: 0,
					deviceCode: this.deviceCode,
					actNodeCode: "all",
					type: 1
				}).then((res) => {

					res.data.list.forEach(v => {
						if (v.deviceStatus === 1) {
							v.color = 'rgba(255, 61, 61, 1)'
							v.statusName = '报警'
						} else if (v.deviceStatus === 2) {
							v.color = 'rgba(0, 255, 196, 1)'
							v.statusName = '正常'
						} else if (v.deviceStatus === 4) {
							v.statusName = '离线'
							v.color = 'rgba(203, 206, 220, 1)'
						} else if (v.deviceStatus === 0) {
							v.statusName = '故障'
							v.color = 'rgba(254, 169, 64, 1)'
						}
					})
					console.log(res, '隐患日志');
					this.deviceFaultlog = res.data.list;
					this.faultLogTotal = res.data.total
				});
			},
			getDeviceRunLog() {
				deviceApi.getDeviceRunLogPagedList({
					pageNum: this.currentPageNum,
					pageSize: 8,
					deptId: 462,
					isDept: 1,
					system: "",
					status: "",
					code: this.deviceCode
				}).then(res => {
					res.data.list.forEach(v => {
						res.data.list.forEach(v => {
							if (v.status === 1) {
								v.color = 'rgba(255, 61, 61, 1)'
								v.statusName = '报警'
							} else if (v.status === 2) {
								v.color = 'rgba(0, 255, 196, 1)'
								v.statusName = '正常'
							} else if (v.status === 4) {
								v.statusName = '离线'
								v.color = 'rgba(203, 206, 220, 1)'
							} else if (v.status === 0) {
								v.statusName = '故障'
								v.color = 'rgba(254, 169, 64, 1)'
							}
						})
						deviceApi.getRunLogDetail({
							messageLogId: v.messageLogId,
							deviceTypeId: v.deviceType,
							system: v.system,
							deptId: v.deptId,
						}).then(res => {
							v.systemName = res.data.systemName
							v.deptName = res.data.deptName
							v.pointData = res.data.pointData
						})
					})
					this.deviceRunLog = res.data.list
					this.runLogTotal = res.data.total
					console.log(res, '运行日志')
				})
			},
			//封装操作日志
			getDeviceOperateLog() {
				deviceApi.ListDeviceLog({
					pageNum: this.currentPageNum,
					pageSize: 8,
					isDept: 0,
					deptId: this.deptId,
					deviceId: this.deviceId
				}).then(res => {
					this.deviceOperateLog = res.data.list
					this.operateLogTotal = res.data.total
				})

			},
			//封装平台操作日志
			DevicePlatformLog() {
				deviceApi.getPlatformLog({
					pageNum: this.currentPageNum,
					pageSize: 8,
					deviceId: this.deviceId,

				}).then(res => {
					this.PlatformLog = res.data.list
					this.platformLogTotal = res.data.total
				})
			},
			selectChange(val) {
				this.startTime = ''
				this.endTime = ''
				this.currentPageNum = 1
				if (val === 1) {
					this.DeviceAlarmList()
				} else if (val === 2) {
					this.DeviceFaultList()
				} else if (val === 3) {
					this.DeviceRemoteControl()
				} else if (val === 4) {
					this.DeviceAlarmLog()
				} else if (val === 5) {
					this.deviceHiddleDanger()
				} else if (val === 6) {
					this.getDeviceRunLog()
				} else if (val === 7) {
					this.getDeviceOperateLog()
				} else {
					this.DevicePlatformLog()
				}
			},
			changePageation(val) {
				this.currentPageNum = val
				if (this.value === 1) {
					this.DeviceAlarmList()
				} else if (this.value === 2) {
					this.DeviceFaultList()
				} else if (this.value === 3) {
					this.DeviceRemoteControl()
				} else if (this.value === 4) {
					this.DeviceAlarmLog()
				} else if (this.value === 5) {
					this.deviceHiddleDanger()
				} else if (this.value === 6) {
					this.getDeviceRunLog()
				} else if (this.value === 7) {
					this.getDeviceOperateLog()
				} else if (this.value === 8) {
					this.DevicePlatformLog()

				}
			},
			dateChange(val) {
				if (val && val.length) {
					this.startTime = val[0] + " 00:00:00";
					this.endTime = val[1] + " 23:59:59";
				} else {
					this.startTime = "";
					this.endTime = "";
				}
				if (this.value === 1) {
					this.DeviceAlarmList()
				} else if (this.value === 2) {
					this.DeviceFaultList()
				} else if (this.value === 4) {
					this.DeviceAlarmLog()
				} else if (this.value === 8) {
					this.DevicePlatformLog()
				}

			}

		}

	};
</script>

<style lang="scss" scoped>
	.device-model {
		width: 100vw;
		height: 100vh;
		overflow: auto;
		background: rgba(0, 0, 0, 0.7);
		position: fixed;
		left: 0;
		top: 0;
		z-index: 2000;
		// overflow: auto;

		.device-content {
			position: absolute;
			padding-bottom: 50px;
			border-radius: 6px;
			background-color: red;
			left: 50%;
			top: 5%;
			transform: translate(-50%, 0%);
			width: 66%;
			// height: 100%;

			background: #01192E;
			// overflow: auto;
			z-index: 1000;
			//弹框关闭按钮

			.alarm-close {
				top: 13px;
				right: 27px;
				font-size: 23px;
				width: 17px;
				height: 19px;
				color: #3de6ff;
				position: absolute;
				z-index: 1001;
			}

			.alarm-title {
				margin-top: 16px;
				font-size: 18px;
				text-align: center;
				position: relative;

				.title-text {
					font-size: 18px;
					color: #3de6ff;
					font-family: 'PingFangSC-Medium';
				}

			}

			.alarm-title::after {
				content: '';
				display: block;
				position: absolute;
				width: 100%;
				top: 40px;
				opacity: 0.1;
				border: 1px solid #1ACFFF;
			}

			.device-desc {
				display: flex;

				.desc-left {
					position: relative;
					margin-left: 50px;
					width: 240px;
					padding-left: 16.5px;

					.left-img {
						width: 240px;
						height: 240px;
					}

					.bottom-img {
						position: absolute;
						height: 20%;
						width: 273px;
						height: 93px;
						top: 150px;
						left: 0;
					}
				}

				.desc-right {
					flex: 1;
					min-width: 750px;
					padding-top: 3%;
					padding-left: 0.56rem;
					padding-right: 50px;

					.right-title {
						font-size: 16px;

						.title-name {
							font-family: 'PingFangSC-Medium';
						}

						.title-id {
							color: rgba(255, 255, 255, 0.8);
						}
					}

					.title-id {
						font-size: 12px;
					}

					.main-item {
						display: flex;
						margin-top: 0.1675rem;
						// margin-top: 15px;

						span {
							margin-right: 5px;
						}

						.item-left {
							flex: 1;

						}

						.item-right {
							flex: 1;
							// padding-left: 30%;
						}

						// margin-left:150px;
						// justify-content: space-between;
						// padding-right: 170px;
					}

					.alarm {

						color: #FF3D3D;
					}

					;

					.fault {
						color: #FEA940;
					}

					.offline {
						color: #CBCEDC;
					}
				}
			}

			.distye {
				.no-distye {
					display: flex;
					flex-direction: column;
					align-items: center;

					image {
						width: 75px;
						height: 45px;
					}

					span {
						font-size: 14px;
					}
				}

				margin: 30px 50px;
				color: rgba(255, 255, 255, 0.6);
				font-size: 12px;
				background-color: rgba(1, 20, 37, 0.8);
				padding: 20px 15px;

				.all-distye {
					display: flex;
					margin-top: 10px;
					overflow-y: auto;
					flex-wrap: wrap;
					height: 55px;

					.distye-item {
						margin-right: 10px;
						width: 120px;
						height: 55px;
						border: 1px solid;
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: center;



						.item-data {
							color: rgba(2, 195, 255, 1);
							font-family: 'PingFangSC-Medium';
							font-size: 18px;

						}

						.fault {
							color: rgba(254, 169, 64, 1);
						}

						.alarm {
							color: rgba(255, 61, 61, 1);
						}

						.offline {
							color: rgba(203, 206, 220, 1);
						}

						border-image: linear-gradient(360deg, rgba(250, 147, 6, 0.22), rgba(250, 147, 6, 0.5)) 1 1;
					}

					.alarm {
						border-image: linear-gradient(360deg, rgba(255, 61, 61, 0.22), rgba(255, 61, 61, 0.5)) 1 1;
					}

					.fault {
						border-image: linear-gradient(360deg, rgba(250, 147, 6, 0.22), rgba(250, 147, 6, 0.5)) 1 1;

					}

					.normal {

						border-image: linear-gradient(360deg, rgba(2, 195, 255, 0.22), rgba(2, 195, 255, 0.5)) 1 1;
					}

					.offline {
						border-image: linear-gradient(360deg, rgba(203, 206, 220, 0.22), rgba(203, 206, 220, 0.5)) 1 1;
					}
				}
			}

			.select {
				margin: 0 50px;

				.select-top {
					height: 30px;
					display: flex;
				}
			}
		}
	}

	.uni-table-td {
		color: rgba(255, 255, 255, 0.7);
	}

	.uni-table-th {
		color: rgba(255, 255, 255, 1);
		font-family: 'PingFangSC-Medium';
	}

	::v-deep .page-pagination .page-con {
		margin-top: 20px;
		height: 60px;
		display: flex;
		justify-content: flex-end;
	}

	::v-deep .page-pagination .page-con .page-scroll-child .pag-btn {
		margin-right: 20px;
		width: 35px;
		height: 35px;
		border-radius: 35px;
		color: #fff !important;
		padding: 0;
		text-align: center;
		border: none !important;
		line-height: 35px;
		background-color: rgba(0, 85, 157, 0.1000);
		// margin: 0;
	}

	::v-deep .page-pagination .page-con .page-scroll-child .pag-btn:first-child {
		border: none;
	}

	::v-deep .page-pagination .page-con .page-scroll-child .pag-btn.prev {
		padding: 0;
	}

	::v-deep .page-pagination .page-con .page-scroll-child .pag-btn.next {
		padding: 0;
	}

	::v-deep .page-pagination .page-con .page-scroll-child .pag-btn.active {
		background-color: rgba(2, 195, 255, 1) !important;
		color: #fff;
	}

	::v-deep .page-pagination .page-con .page-scroll {
		margin: 0;
	}

	::v-deep .el-range-editor--mini .el-range-separator {
		height: 50px;
		line-height: 50px;
		font-size: 30px;
	}

	::v-deep.el-date-editor .el-range-input,
	.el-date-editor .el-range-separator {
		background-color: rgba(0, 0, 0, 0.3);
	}

	::v-deep .el-date-editor .el-range-separator {
		height: 26px;
	}

	::v-deep .empty-border {
		border: none;
	}

	::v-deep .el-date-editor .el-range-separator {
		height: 56px;
		width: 9%;
	}

	::v-deep .el-date-editor .el-range-input {
		width: 37%;
	}

	::v-deep .el-input--medium .el-input__inner {
		height: 30px !important;
		line-height: 30px;
	}

	::v-deep .el-input__suffix {
		top: 1px;
	}

	.detail-left .real-alarm .video-swiper .swiper-item {
		cursor: default !important;
	}

	.alarm-reason {
		max-width: 180px;
	}

	.new-data {
		max-width: 180px;
	}

	.uni-table-td {
		color: rgba(255, 255, 255, 0.7);
		border-bottom: 1px solid rgba(2, 195, 255, 0.25);
		padding: 13px 10px;
	}

	::v-deep .el-picker-panel .el-date-table td span {
		background-color: rgba(0, 0, 0, 0);
	}

	// ::v-deep .el-select-dropdown{
	// 	border:none !important;
	// }
</style>